/**
 * @file Navbar.jsx
 * @description 网站的导航栏组件。
 */
import React from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { logout } from '../store/authSlice';
import toast from 'react-hot-toast';
import { FaShoppingCart, FaSignInAlt, FaUserPlus, FaSignOutAlt, FaUserCircle } from 'react-icons/fa'; // 导入图标

const Navbar = () => {
  const cartItems = useSelector((state) => state.cart.items);
  const { isAuthenticated, user } = useSelector((state) => state.auth);
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const totalCartItems = cartItems.reduce((total, item) => total + item.qty, 0);

  const handleLogout = () => {
    dispatch(logout());
    toast.success('您已成功退出登录！');
    navigate('/login');
  };

  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light py-3 sticky-top shadow-sm">
      <div className="container">
        <NavLink className="navbar-brand fw-bold fs-4" to="/">
          我的电商
        </NavLink>
        <button
          className="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarSupportedContent">
          <ul className="navbar-nav mx-auto mb-2 mb-lg-0">
            <li className="nav-item">
              <NavLink className="nav-link" aria-current="page" to="/">
                首页
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink className="nav-link" to="/products">
                商品
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink className="nav-link" to="/about">
                关于
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink className="nav-link" to="/contact">
                联系我们
              </NavLink>
            </li>
          </ul>
          <div className="buttons d-flex align-items-center">
            {isAuthenticated && user ? (
              <>
                <NavLink to="/profile" className="btn btn-outline-secondary ms-2 btn-sm">
                  <FaUserCircle className="me-1" />
                  {user.name} (用户中心)
                </NavLink>
                <button onClick={handleLogout} className="btn btn-outline-danger ms-2 btn-sm">
                  <FaSignOutAlt className="me-1" />
                  退出登录
                </button>
              </>
            ) : (
              <>
                <NavLink to="/login" className="btn btn-outline-dark ms-2">
                  <FaSignInAlt className="me-1" />
                  登录
                </NavLink>
                <NavLink to="/register" className="btn btn-outline-dark ms-2">
                  <FaUserPlus className="me-1" />
                  注册
                </NavLink>
              </>
            )}
            <NavLink to="/cart" className="btn btn-outline-primary ms-2">
              <FaShoppingCart className="me-1" />
              购物车 ({totalCartItems})
            </NavLink>
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;